<template>
  <div class="center_bottom">
    <Echart
        :options="option"
        :isWatchAutoInit="false"
        v-if="pageflag"
        id="leftTopChart"
        class="echarts_bottom"
        @handleChartEvent="handleChartEvent"
    ></Echart>
    <Reacquire v-else @onclick="getData" style="line-height: 200px">
    </Reacquire>
  </div>

  <!--  <div class="center_bottom">-->
  <!--    <Echart-->
  <!--        :options="option"-->
  <!--        :isWatchAutoInit="false"-->
  <!--        v-if="pageflag"-->
  <!--        id="bottomLeftChart"-->
  <!--        class="echarts_bottom"-->
  <!--        @handleChartEvent="handleChartEvent"-->
  <!--    ></Echart>-->
  <!--    <Reacquire v-else @onclick="getData" style="line-height: 200px">-->
  <!--      重新获取-->
  <!--    </Reacquire>-->
  <!--  </div>-->
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
import dataValues from "@/assets/js/data_values.json";
import moment from "moment/moment";

export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
      len:0,
      dataIndex:0,
      xAxisData:[],
      yAxisData1:[],
      yAxisData2:[],
      myChart:null,
      dataLen:0
    };
  },
  props: {
    socketData: Object
  },
  mounted() {
    this.getData();
  },
  watch:{
    '$store.state.setting.echartsAutoTime':{
      handler () {
        this.clearData();
        this.switper();
      },
      deep: true
    }
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    handleChartEvent(val){
      this.myChart = val;
      setTimeout(()=>{
        this.myChart.setOption(this.option, true)
        this.dataLen = this.option.series[0].data.length;
      },1000)
    },
    getData() {
      if(this.socketData.avg_width && this.socketData.max_width){
        this.pageflag = true;
        const now = new Date();
        if(this.yAxisData1.length > 4){
          this.xAxisData.shift()
          this.yAxisData1.shift()
          this.yAxisData2.shift()
          this.xAxisData.push((moment(now).format('mm:ss SSS')))
          if(this.socketData.change_status){
            this.yAxisData1.push(parseFloat(this.socketData.max_width.toFixed(3)))
            this.yAxisData2.push(parseFloat(this.socketData.avg_width.toFixed(3)))
          }else{
            this.yAxisData1.push(0)
            this.yAxisData2.push(0)
          }
        }else{
          this.xAxisData.push((moment(now).format('mm:ss SSS')))
          if(this.socketData.change_status){
            this.yAxisData1.push(parseFloat(this.socketData.max_width.toFixed(3)))
            this.yAxisData2.push(parseFloat(this.socketData.avg_width.toFixed(3)))
          }else{
            this.yAxisData1.push(0)
            this.yAxisData2.push(0)
          }
        }
        this.$nextTick(() => {
          this.init(this.xAxisData, this.yAxisData1, this.yAxisData2);
        });

        if(this.myChart){
          this.myChart.setOption(this.option);
          this.myChart.dispatchAction({
            type: 'shift',
            seriesName: '河流最大深度'
          });
          this.myChart.dispatchAction({
            type: 'shift',
            seriesName: '河流平均深度'
          });
        }
      }
      this.switper();
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
      );
    },
    init(xData, yData, yData2) {
      this.option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          data: ["河流最大宽度", "河流平均宽度"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0",
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "30px",
        },
        xAxis: {
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "河流最大宽度",
            min:function(value){
              return parseFloat((value.min - 0.1).toFixed(3));
            },
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
          },
          {
            name: "河流平均宽度",
            min:function(value){
              return parseFloat((value.min - 0.1).toFixed(3));
            },
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
          },
        ],
        animation: this.$store.state.setting.isAnimation,
        series: [
          {
            animationDuration: this.$store.state.setting.echartsAutoTime,
            name: "河流最大宽度",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" },
              ]),
            },
            data: yData,
          },
          {
            animationDuration: this.$store.state.setting.echartsAutoTime,
            name: "河流平均宽度",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              color: "#F02FC2",
            },
            data: yData2,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
